<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .register-container {
            background-color: white;
            padding: 2.5rem 3rem;
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
            width: 100%;
            max-width: 450px;
        }
        .register-title {
            text-align: center;
            margin-bottom: 2rem;
            color: #333;
            font-size: 1.8rem;
            font-weight: 600;
        }
        .form-group {
            margin-bottom: 1.2rem;
        }
        label {
            display: block;
            margin-bottom: 0.5rem;
            color: #555;
            font-weight: 500;
        }
        input {
            width: 100%;
            padding: 0.9rem;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 1rem;
            transition: all 0.3s ease;
        }
        input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        .password-group {
            position: relative;
        }
        .toggle-password {
            position: absolute;
            right: 10px;
            top: 70%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #888;
        }
        .terms {
            display: flex;
            align-items: flex-start;
            margin-bottom: 1.5rem;
        }
        .terms input {
            width: auto;
            margin-right: 0.5rem;
            margin-top: 4px;
        }
        .terms label {
            font-size: 0.9rem;
        }
        .terms a {
            color: #667eea;
            text-decoration: none;
        }
        .terms a:hover {
            text-decoration: underline;
        }
        .register-btn {
            width: 100%;
            padding: 0.9rem;
            background-color: #667eea;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .register-btn:hover {
            background-color: #556cd6;
        }
        .login-link {
            text-align: center;
            margin-top: 1.5rem;
            font-size: 0.9rem;
        }
        .login-link a {
            color: #667eea;
            font-weight: 500;
            text-decoration: none;
        }
        .login-link a:hover {
            text-decoration: underline;
        }
        .error-message {
            color: #e74c3c;
            font-size: 0.85rem;
            margin-top: 0.3rem;
            display: none;
        }
        .input-error {
            border-color: #e74c3c;
        }
    </style>
</head>
<body>
    <div class="register-container">
        <h2 class="register-title">创建账户</h2>
        <form id="register-form">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" required placeholder="请输入用户名">
                <div class="error-message" id="username-error">用户名长度至少为4个字符</div>
            </div>
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" id="email" name="email" required placeholder="请输入邮箱地址">
                <div class="error-message" id="email-error">请输入有效的邮箱地址</div>
            </div>
            <div class="form-group password-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required placeholder="请输入密码">
                <span class="toggle-password">👁️</span>
                <div class="error-message" id="password-error">密码长度至少为6个字符，包含字母和数字</div>
            </div>
            <div class="form-group password-group">
                <label for="confirm-password">确认密码</label>
                <input type="password" id="confirm-password" name="confirm-password" required placeholder="请再次输入密码">
                <span class="toggle-password">👁️</span>
                <div class="error-message" id="confirm-error">两次输入的密码不一致</div>
            </div>
            <div class="terms">
                <input type="checkbox" id="agree-terms" name="agree-terms" required>
                <label for="agree-terms">我同意<a href="#">服务条款</a>和<a href="#">隐私政策</a></label>
            </div>
            <button type="submit" class="register-btn">注册</button>
            <div class="login-link">
                已有账户? <a href="login.html">立即登录</a>
            </div>
        </form>
    </div>

    <script>
        // 密码显示/隐藏功能
        const togglePasswords = document.querySelectorAll('.toggle-password');
        togglePasswords.forEach(toggle => {
            toggle.addEventListener('click', function() {
                const passwordInput = this.previousElementSibling;
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                this.textContent = type === 'password' ? '👁️' : '👁️‍🗨️';
            });
        });

        // 表单验证
        const registerForm = document.getElementById('register-form');
        const usernameInput = document.getElementById('username');
        const emailInput = document.getElementById('email');
        const passwordInput = document.getElementById('password');
        const confirmInput = document.getElementById('confirm-password');

        // 用户名验证
        usernameInput.addEventListener('blur', function() {
            const errorElement = document.getElementById('username-error');
            if (this.value.length < 4) {
                this.classList.add('input-error');
                errorElement.style.display = 'block';
            } else {
                this.classList.remove('input-error');
                errorElement.style.display = 'none';
            }
        });

        // 邮箱验证
        emailInput.addEventListener('blur', function() {
            const errorElement = document.getElementById('email-error');
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(this.value)) {
                this.classList.add('input-error');
                errorElement.style.display = 'block';
            } else {
                this.classList.remove('input-error');
                errorElement.style.display = 'none';
            }
        });

        // 密码验证
        passwordInput.addEventListener('blur', function() {
            const errorElement = document.getElementById('password-error');
            const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d).{6,}$/;
            if (!passwordRegex.test(this.value)) {
                this.classList.add('input-error');
                errorElement.style.display = 'block';
            } else {
                this.classList.remove('input-error');
                errorElement.style.display = 'none';
                // 如果确认密码已填写，验证密码一致性
                if (confirmInput.value) {
                    confirmInput.dispatchEvent(new Event('blur'));
                }
            }
        });

        // 确认密码验证
        confirmInput.addEventListener('blur', function() {
            const errorElement = document.getElementById('confirm-error');
            if (this.value !== passwordInput.value) {
                this.classList.add('input-error');
                errorElement.style.display = 'block';
            } else {
                this.classList.remove('input-error');
                errorElement.style.display = 'none';
            }
        });

        // 表单提交处理
        registerForm.addEventListener('submit', function(e) {
            e.preventDefault();
            // 触发表单验证
            usernameInput.dispatchEvent(new Event('blur'));
            emailInput.dispatchEvent(new Event('blur'));
            passwordInput.dispatchEvent(new Event('blur'));
            confirmInput.dispatchEvent(new Event('blur'));

            // 检查是否有错误
            const errorElements = document.querySelectorAll('.error-message[style*="display: block"]');
            if (errorElements.length === 0 && document.getElementById('agree-terms').checked) {
                // 收集表单数据
                const formData = {
                    username: usernameInput.value,
                    email: emailInput.value,
                    password: passwordInput.value
                };
                alert(`注册成功！\n\n用户信息:\n用户名: ${formData.username}\n邮箱: ${formData.email}\n\n实际项目中这里会提交到后端`);
                // 跳转到登录页面
                window.location.href = 'login.html';
            } else {
                alert('请检查并修正表单中的错误');
            }
        });
    </script>
</body>
</html>